<template>

	<div class="product-add">
		<!--form表单-->
		<el-form ref="form" :model="form" label-width="150px">
			<div class="common-form">运营后台设置</div>
			<el-form-item label="商城运营名称" :rules="[{required: true,message: ' '}]" prop="shop_name">
				<el-input v-model="form.admin_name" placeholder="商城运营名称" class="max-w460"></el-input>
				<div class="tips">
					saas端商城运营名称，显示在登录页
				</div>
			</el-form-item>
			<el-form-item label="商城运营登录背景" prop="admin_bg_img">
				<el-input v-model="form.admin_bg_img" placeholder="商城运营登录背景" class="max-w460"></el-input>
				<div class="tips">
					saas端商城运营登录背景，不填则为系统默认登录背景，填写网络地址
				</div>
			</el-form-item>
			<el-form-item label="是否开启登录验证码">
				<div>
					<el-radio v-model="form.admin_code" :label="1">开启</el-radio>
					<el-radio v-model="form.admin_code" :label="0">关闭</el-radio>
				</div>
			</el-form-item>
			<div class="common-form">商城后台设置</div>
			<el-form-item label="商城系统名称" :rules="[{required: true,message: ' '}]" prop="shop_name">
				<el-input v-model="form.shop_name" placeholder="商城名称" class="max-w460"></el-input>
				<div class="tips">
					shop端商城名称，显示在登录页
				</div>
			</el-form-item>
			<el-form-item label="商城登录背景" prop="shop_bg_img">
				<el-input v-model="form.shop_bg_img" placeholder="商城登录背景" class="max-w460"></el-input>
				<div class="tips">
					shop端商城登录背景，不填则为系统默认登录背景，填写网络地址
				</div>
			</el-form-item>
			<el-form-item label="商城登录logo" prop="shop_logo_img">
				<el-input v-model="form.shop_logo_img" placeholder="商城登录logo" class="max-w460"></el-input>
				<div class="tips">
					shop端商城登录logo，不填则为系统默认登录log，填写网络地址
				</div>
			</el-form-item>
			<el-form-item label="是否开启登录验证码">
				<div>
					<el-radio v-model="form.shop_code" :label="1">开启</el-radio>
					<el-radio v-model="form.shop_code" :label="0">关闭</el-radio>
				</div>
			</el-form-item>
			<div class="common-form">商户后台设置</div>
			<el-form-item label="商户系统名称" :rules="[{required: true,message: ' '}]" prop="supplier_name">
				<el-input v-model="form.supplier_name" placeholder="商户系统名称" class="max-w460"></el-input>
				<div class="tips">
					商户端名称，显示在登录页
				</div>
			</el-form-item>
			<el-form-item label="商户登录背景" prop="supplier_bg_img">
				<el-input v-model="form.supplier_bg_img" placeholder="商户登录背景" class="max-w460"></el-input>
				<div class="tips">
					商户端登录背景，不填则为系统默认登录背景，填写网络地址
				</div>
			</el-form-item>
			<el-form-item label="商户登录logo" prop="supplier_logo_img">
				<el-input v-model="form.supplier_logo_img" placeholder="商户登录logo" class="max-w460"></el-input>
				<div class="tips">
					商户端登录logo，不填则为系统默认登录logo，填写网络地址
				</div>
			</el-form-item>
			<el-form-item label="是否开启登录验证码">
				<div>
					<el-radio v-model="form.supplier_code" :label="1">开启</el-radio>
					<el-radio v-model="form.supplier_code" :label="0">关闭</el-radio>
				</div>
			</el-form-item>
			<div class="common-form">客服服务设置</div>
			<el-form-item label="客服系统名称" :rules="[{required: true,message: ' '}]" prop="supplier_name">
				<el-input v-model="form.server_name" placeholder="客服系统名称" class="max-w460"></el-input>
				<div class="tips">
					客服端名称，显示在登录页
				</div>
			</el-form-item>
			<el-form-item label="客服登录背景" prop="supplier_bg_img">
				<el-input v-model="form.server_bg_img" placeholder="客服登录背景" class="max-w460"></el-input>
				<div class="tips">
					客服端登录背景，不填则为系统默认登录背景，填写网络地址
				</div>
			</el-form-item>
			<el-form-item label="客服socket地址" :rules="[{required: true,message: ' '}]" prop="url">
				<el-input v-model="form.url" placeholder="客服请求" class="max-w460"></el-input>
				<div class="tips">
					填写格式为 wss://socket.com,如果是小程序，请前往小程序添加域名
				</div>
			</el-form-item>
			<el-form-item label="是否开启在线客服">
				<div>
					<el-radio v-model="form.service_open" :label="1">开启</el-radio>
					<el-radio v-model="form.service_open" :label="0">关闭</el-radio>
				</div>
			</el-form-item>
			<el-form-item label="是否开启登录验证码">
				<div>
					<el-radio v-model="form.server_code" :label="1">开启</el-radio>
					<el-radio v-model="form.server_code" :label="0">关闭</el-radio>
				</div>
			</el-form-item>
			<div class="common-form">微信服务商支付设置</div>
			<el-form-item label="是否开启微信服务商支付">
				<div>
					<el-radio v-model="form.weixin_service.is_open" :label="1">开启</el-radio>
					<el-radio v-model="form.weixin_service.is_open" :label="0">关闭</el-radio>
				</div>
			</el-form-item>
			<template v-if="form.weixin_service.is_open == 1">
				<el-form-item label="服务商户号">
					<el-input v-model="form.weixin_service.mch_id" placeholder="服务商户号" class="max-w460"></el-input>
					<div class="tips">
						填写服务商户号、10位数字
					</div>
				</el-form-item>
				<el-form-item label="服务商支付秘钥apikey">
					<el-input v-model="form.weixin_service.apikey" placeholder="服务商支付秘钥apikey"
						class="max-w460"></el-input>
					<div class="tips">
						填写服务商户支付秘钥apikey
					</div>
				</el-form-item>
				<el-form-item label="服务商appid">
					<el-input v-model="form.weixin_service.app_id" placeholder="服务商appid" class="max-w460"></el-input>
					<div class="tips">
						填写服务商户号绑定的公众号appid
					</div>
				</el-form-item>
				<el-form-item label="证书序列号/公钥">
					<el-input v-model="form.weixin_service.serial_no" placeholder="证书序列号serial/公钥" class="max-w460"></el-input>
					<div class="tips">
					  旧版微信支付为平台证书序列号，新版微信支付为公钥
					</div>
				</el-form-item>
				<el-form-item label="apiclient_cert.pem">
					<el-input type="textarea" :rows="4" placeholder="使用文本编辑器打开apiclient_cert.pem文件，将文件的全部内容复制进来"
						v-model="form.weixin_service.cert_pem" class="max-w460"></el-input>
					<div class="tips">使用文本编辑器打开apiclient_key.pem文件，将文件的全部内容复制进来</div>
				</el-form-item>
				<el-form-item label="apiclient_key.pem">
					<el-input type="textarea" :rows="4" placeholder="使用文本编辑器打开apiclient_cert.pem文件，将文件的全部内容复制进来"
						v-model="form.weixin_service.key_pem" class="max-w460"></el-input>
					<div class="tips">使用文本编辑器打开apiclient_key.pem文件，将文件的全部内容复制进来</div>
				</el-form-item>
			</template>
			<!--文件上传设置-->
			<div class="common-form">文件上传设置</div>
			<el-form-item label="最大图片上传">
				<el-input v-model="form.storage.max_image" class="max-w460">
					<template slot="append">M</template>
				</el-input>
				<div class="tips">修改后请修改php上传配置后生效</div>
			</el-form-item>
			<el-form-item label="最大视频上传">
				<el-input v-model="form.storage.max_video" class="max-w460">
					<template slot="append">M</template>
				</el-input>
				<div class="tips">修改后请修改php上传配置后生效</div>
			</el-form-item>
			<el-form-item label="默认上传方式">
				<div>
					<el-radio v-model="form.storage.default" label="local" @change="getRadio">本地 (不推荐)</el-radio>
					<el-radio v-model="form.storage.default" label="qiniu" @change="getRadio">七牛云存储</el-radio>
					<el-radio v-model="form.storage.default" label="aliyun" @change="getRadio">阿里云OSS</el-radio>
					<el-radio v-model="form.storage.default" label="qcloud" @change="getRadio">腾讯云COS</el-radio>
				</div>
			</el-form-item>
			<!--七牛云存储-->
			<div v-if="form.storage.default == 'qiniu'">
				<el-form-item label="存储空间名称 Bucket"><el-input v-model="form.storage.engine.qiniu.bucket"
						class="max-w460"></el-input></el-form-item>
				<el-form-item label="ACCESS_KEY AK"><el-input v-model="form.storage.engine.qiniu.access_key"
						class="max-w460"></el-input></el-form-item>
				<el-form-item label="SECRET_KEY SK"><el-input v-model="form.storage.engine.qiniu.secret_key"
						class="max-w460"></el-input></el-form-item>
				<el-form-item label="空间域名 Domain">
					<el-input v-model="form.storage.engine.qiniu.domain" class="max-w460"></el-input>
					<div class="tips">
						请补全http:// 或 https://，例如：http://static.cloud.com
					</div>
				</el-form-item>
			</div>
			<!--阿里云OSS-->
			<div v-if="form.storage.default == 'aliyun'">
				<el-form-item label="存储空间名称 Bucket"><el-input v-model="form.storage.engine.aliyun.bucket"
						class="max-w460"></el-input></el-form-item>
				<el-form-item label="AccessKeyId"><el-input v-model="form.storage.engine.aliyun.access_key_id"
						class="max-w460"></el-input></el-form-item>
				<el-form-item label="AccessKeySecret"><el-input v-model="form.storage.engine.aliyun.access_key_secret"
						class="max-w460"></el-input></el-form-item>
				<el-form-item label="空间域名 Domain">
					<el-input v-model="form.storage.engine.aliyun.domain" class="max-w460"></el-input>
					<div class="tips">
						请补全http:// 或 https://，例如：http://static.cloud.com
					</div>
				</el-form-item>
			</div>
			<!--腾讯云COS-->
			<div v-if="form.storage.default == 'qcloud'">
				<el-form-item label="存储空间名称 Bucket"><el-input
						v-model="form.storage.engine.qcloud.bucket"></el-input></el-form-item>
				<el-form-item label="所属地域 Region">
					<el-input v-model="form.storage.engine.qcloud.region"></el-input>
					<div class="tips">
						请填写地域简称，例如：ap-beijing、ap-hongkong、eu-frankfurt
					</div>
				</el-form-item>
				<el-form-item label="SecretId"><el-input
						v-model="form.storage.engine.qcloud.secret_id"></el-input></el-form-item>
				<el-form-item label="SecretKey"><el-input
						v-model="form.storage.engine.qcloud.secret_key"></el-input></el-form-item>
				<el-form-item label="空间域名 Domain">
					<el-input v-model="form.storage.engine.qcloud.domain"></el-input>
					<div class="tips">
						请补全http:// 或 https://，例如：http://static.cloud.com
					</div>
				</el-form-item>
			</div>
			<el-form-item label="">
				<!--提交-->
				<div class="button-wrapper">
					<el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
	import {
		serviceDetail,
		editService
	} from '@/api/setting.js';
	export default {
		data() {
			return {
				/*是否正在加载*/
				loading: false,
				/*form表单数据*/
				form: {
					url: '',
					service_open: 1,
					weixin_service: {},
					admin_code: '',
					shop_code: '',
					supplier_code: '',
					server_code: '',
					shop_logo_img: '',
					supplier_logo_img: '',
					storage: {
						default: "local",
						max_image: "",
						max_video: "",
						engine: {
							qiniu: {},
							aliyun: {},
							qcloud: {},
						}
					},
				},

			};
		},
		created() {
			this.getParams();
		},

		methods: {

			/*获取配置数据*/
			getParams() {
				let self = this;
				serviceDetail({}).then(res => {
						self.form = res.data.vars.values;
						let vars = res.data.vars.values;
						self.form.service_open = parseInt(self.form.service_open);
						self.form.weixin_service.is_open = parseInt(self.form.weixin_service.is_open);
						self.form.storage.default = vars.storage.default;
						self.form.storage.max_image = vars.storage.max_image;
						self.form.storage.max_video = vars.storage.max_video;
						self.form.storage.engine.qiniu = vars.storage.engine.qiniu;
						self.form.storage.engine.aliyun = vars.storage.engine.aliyun;
						self.form.storage.engine.qcloud = vars.storage.engine.qcloud;
						self.form.admin_code = parseInt(self.form.admin_code);
						self.form.shop_code = parseInt(self.form.shop_code);
						self.form.supplier_code = parseInt(self.form.supplier_code);
						self.form.server_code = parseInt(self.form.server_code);
						self.loading = false;
					})
					.catch(error => {
						self.loading = false;
					});

			},
			/*提交*/
			onSubmit() {
				let self = this;
				let params = this.form;
				self.$refs.form.validate((valid) => {
					if (valid) {
						self.loading = true;
						editService(params, true)
							.then(data => {
								self.loading = false;
								ElMessage({
									message: '恭喜你，设置成功',
									type: 'success'
								});
								self.$router.push('/setting/service/index');
							})
							.catch(error => {
								self.loading = false;
							});
					}
				});
			},
			//监听单选按钮
			getRadio(val) {},
		}
	};
</script>
<style>
	.tips {
		color: #ccc;
		width: 100%;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}

	.button-wrapper {
		display: flex;
	}
</style>